<template>
  <div class="the-header">
    <div class="header-logo" @click="goHome">
      <svg t="1604843807636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="865" width="200" height="200">
        <path
          d="M311.226182 393.425455a29.090909 29.090909 0 0 1 29.975273 24.92509l0.256 2.97891 17.92 447.534545a29.090909 29.090909 0 0 1-57.879273 5.306182l-0.279273-2.955637-17.896727-447.557818a29.090909 29.090909 0 0 1 27.927273-30.254545z"
          fill="#5AC2EE" p-id="866"></path>
        <path
          d="M150.155636 124.881455A29.090909 29.090909 0 0 1 180.084364 149.876364l0.256 2.978909 14.429091 378.926545c0.093091 5.632 1.861818 16.011636 6.516363 25.716364 2.304 4.817455 5.096727 8.843636 8.378182 12.008727l122.903273 118.458182a29.090909 29.090909 0 0 1-37.934546 43.985454l-3.141818-2.769454-122.228364-117.806546a98.676364 98.676364 0 0 1-20.48-28.788363 123.950545 123.950545 0 0 1-12.008727-45.265455L122.181818 155.066182a29.090909 29.090909 0 0 1 27.950546-30.184727z"
          fill="#5AC2EE" p-id="867"></path>
        <path
          d="M433.873455 403.153455a29.090909 29.090909 0 0 1 45.451636 36.18909l-1.978182 2.46691-143.220364 161.11709a29.090909 29.090909 0 0 1-45.451636-36.165818l1.978182-2.490182 143.220364-161.11709zM433.873455 242.036364l43.473454 38.656-143.220364 161.117091-43.473454-38.632728z"
          fill="#5AC2EE" p-id="868"></path>
        <path
          d="M189.742545 419.84l143.220364 143.197091-41.146182 41.146182-143.220363-143.220364zM189.742545 258.699636l143.220364 143.220364-41.146182 41.146182-143.220363-143.220364z"
          fill="#5AC2EE" p-id="869"></path>
        <path
          d="M240.034909 17.501091a29.090909 29.090909 0 0 1 30.231273 24.599273l0.302545 2.955636 16.453818 322.234182a29.090909 29.090909 0 0 1-57.809454 5.934545l-0.302546-2.955636-16.453818-322.234182A29.090909 29.090909 0 0 1 240.034909 17.501091zM347.461818 17.501091a29.090909 29.090909 0 0 1 30.231273 24.599273l0.302545 2.955636 16.407273 322.257455a29.090909 29.090909 0 0 1-57.809454 5.911272l-0.302546-2.955636-16.407273-322.234182A29.090909 29.090909 0 0 1 347.461818 17.501091zM363.124364 634.949818a29.090909 29.090909 0 1 1 41.751272 40.541091l-16.221091 16.523636c-5.259636 5.352727-10.426182 10.519273-15.406545 15.499637l-22.807273 22.411636a29.090909 29.090909 0 1 1-40.261818-42.007273l14.824727-14.498909 14.615273-14.568727c7.540364-7.563636 15.406545-15.569455 23.505455-23.901091zM438.225455 107.008a29.090909 29.090909 0 0 1 30.254545 24.576l0.302545 2.978909 13.870546 268.520727a29.090909 29.090909 0 0 1-57.809455 5.957819l-0.302545-2.955637-13.870546-268.520727a29.090909 29.090909 0 0 1 27.55491-30.557091zM590.475636 553.146182a29.090909 29.090909 0 0 1 53.643637 22.341818l-1.163637 2.769455-196.887272 411.74109a29.090909 29.090909 0 0 1-53.666909-22.341818l1.163636-2.746182 196.910545-411.764363z"
          fill="#5AC2EE" p-id="870"></path>
        <path
          d="M572.346182 267.217455a29.090909 29.090909 0 0 1 54.039273 21.34109l-1.093819 2.792728-153.064727 335.825454c-0.418909 0.837818-1.396364 3.328-2.490182 6.935273-3.118545 10.402909-3.956364 20.945455-1.582545 29.626182l0.744727 2.304 56.413091 158.417454a29.090909 29.090909 0 0 1-54.807273 19.549091l-56.436363-158.487272a90.763636 90.763636 0 0 1-2.001455-6.376728c-5.701818-20.782545-4.049455-41.774545 1.931636-61.719272 1.698909-5.655273 3.444364-10.263273 4.794182-13.335273l153.553455-336.872727zM767.906909 609.978182l19.874909 54.690909-196.910545 71.586909-19.898182-54.690909zM821.620364 466.757818l19.874909 54.690909-196.933818 71.586909-19.87491-54.667636z"
          fill="#5AC2EE" p-id="871"></path>
        <path
          d="M518.749091 502.062545l71.610182 196.910546-54.690909 19.898182-71.586909-196.933818zM590.359273 376.738909l71.610182 196.933818-54.69091 19.874909-71.586909-196.910545z"
          fill="#5AC2EE" p-id="872"></path>
        <path
          d="M715.403636 196.002909a29.090909 29.090909 0 0 1 54.341819 20.526546l-1.047273 2.792727-125.323637 286.440727a29.090909 29.090909 0 0 1-54.36509-20.549818l1.070545-2.792727 125.300364-286.417455zM786.990545 249.716364a29.090909 29.090909 0 0 1 54.365091 20.526545l-1.047272 2.792727-125.323637 286.417455a29.090909 29.090909 0 0 1-54.365091-20.526546l1.070546-2.792727 125.300363-286.417454z"
          fill="#5AC2EE" p-id="873"></path>
        <path
          d="M858.996364 374.202182a29.090909 29.090909 0 0 1 53.690181 22.225454l-1.163636 2.746182-162.234182 341.527273a121.506909 121.506909 0 0 1-21.946182 32.116364 105.122909 105.122909 0 0 1-40.401454 27.601454L519.214545 861.556364a29.090909 29.090909 0 0 1-22.597818-53.527273l4.119273-1.652364 165.957818-60.532363c6.446545-2.397091 12.520727-6.749091 18.059637-12.706909 4.957091-5.329455 8.517818-10.705455 10.58909-14.615273l163.607273-344.343273z"
          fill="#5AC2EE" p-id="874"></path>
      </svg>
      <!--<span>music</span>-->
    </div>
    <ul class="navbar">
      <li :class="{active: item.name === activeName}" v-for="item in navMsg" :key="item.path"
          @click="goPage(item.path,item.name)">
        {{item.name}}
      </li>
      <li>
        <div class="header-search">
          <input type="text" placeholder="全文搜索" @keyup.enter="goSearch()" v-model="keywords">
          <div class="search-btn" @click="goSearch()">
            <svg class="icon">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
          </div>
        </div>
      </li>
      <li v-show="!loginIn" :class="{active: item.name === activeName}" v-for="item in loginMsg" :key="item.path"
          @click="goPage(item.path,item.name)">
        {{item.name}}
      </li>
    </ul>
    <div class="header-right" v-show="loginIn">
      <div id='user'>
        <img :src='attachImageUrl(avator)'>
      </div>
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path)">{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import {navMsg, loginMsg, menuList} from '../assets/data/header';

  export default {
    name: 'the-header',
    data() {
      return {
        navMsg: [],    //左侧导航栏
        keywords: '',  //搜索关键字
        loginMsg: [],  //右侧导航栏
        menuList: [], //用户下拉菜单
      }
    },
    computed: {
      ...mapGetters([
        'activeName',
        'loginIn',
        'avator'
      ])
    },
    created() {
      this.navMsg = navMsg;
      this.loginMsg = loginMsg;
      this.menuList = menuList;
    },
    mounted() {
      document.querySelector('#user').addEventListener('click', function (e) {
        document.querySelector('.menu').classList.add("show");
        e.stopPropagation()           //关键在于阻止冒泡
      }, false);
      document.querySelector('.menu').addEventListener('click', function (e) {
        e.stopPropagation()           //点击菜单内部时，阻止时间冒泡，这样，点击内部时，菜单不会关闭
      }, false);
      document.addEventListener('click', function () {
        document.querySelector('.menu').classList.remove('show');
      }, false);
    },

    methods: {
      //提示信息
      notify(title, type) {
        this.$notify({
          title: title,
          type: type
        })
      },
      goHome() {
        this.$router.push({path: "/"});
      },
      goPage(path, name) {
        if (!this.loginIn && (path === '/console' || path === '/correct' || path === '/identify')) {
          this.notify('请先登录', 'warning');
        } else {
          this.$store.commit('setActiveName', name);
          this.$router.push({path: path});
        }
      },
      goSearch() {
        this.$router.push({path: '/search', query: {keywords: this.keywords}})
      },
      //获取图片地址
      attachImageUrl(srcUrl) {
        return srcUrl ? this.$store.state.configure.HOST + srcUrl : '../assets/img/user.jpg';
      },
      goMenuList(path) {
        if (path == 0) {
          this.$store.commit('setLoginIn', false);
          this.$store.commit('setIsActive', false);
          this.$router.go(0);
        } else {
          this.$router.push({path: path});
        }
      }
    }

  }
</script>

<style lang="scss" scoped>
  @import '../assets/css/the-header.scss';
</style>
